<template>
  <div id="card_conter">
    <van-nav-bar left-arrow title="名片中心" fixed @click-left="gotoMember" :class="[this.fun.getPhoneEnv() == 3 ? 'pcStyle' : '']"></van-nav-bar>
    <div class="card_a">
      <div class="header_box" :style="bacImage">
        <div class="header" @click.stop="gotoBusiness">
          <div class="img">
            <img :src="cardMessage.card_avatar" />
          </div>
          <div class="collect" >
            <i class="iconfont icon-bc_like_normal"></i>
            <span class="people">{{ cardMessage.card_statistics&&cardMessage.card_statistics.collection }}人收藏</span>
          </div>
        </div>
        <ul class="per_info">
          <li style="display: flex; flex-direction: column; margin-bottom: 1rem;">
            <p class="card-name">{{ cardMessage.card_name }}</p>
            <div>
              <span class="role-name">{{ cardMessage.role_name }}</span>
              <span class="level-name" v-if="role_name.level_name && role_name.level_name != null">{{ role_name.level_name }}</span>
            </div>
            <div class="flex-a-c" v-if="cardData.auth">
              <div class="flex-a-c certification-box certification-box-bg-fff" @click.stop="toSignIndexV2(!cardData.auth.person.status)">
                <i class="iconfont icon-baoming"></i>
                <div class="text">{{cardData.auth.person.status?'会员已认证':'会员未认证'}}</div>
              </div>
              <div class="flex-a-c certification-box" >
                <i class="iconfont icon-icon_company"></i>
                <div class="text">{{cardData.auth.company.length > 0?'企业已认证':'企业未认证'}}</div>
              </div>
            </div>
          </li>
          <li v-if="cardMessage.card_mobile" class="items-center">
            <i class="iconfont icon-zx_map_tel"></i>
            <a :href="`tel:${cardMessage.card_mobile}`" class="fz-24">{{ cardMessage.card_mobile }}</a>
          </li>
          <li v-if="cardMessage.card_wechat" class="items-center">
            <i class="iconfont icon-card_weixin"></i>
            <span class="fz-24">{{ cardMessage.card_wechat }}</span>
          </li>
          <li v-if="!this.fun.isTextEmpty(cardMessage.company)&& !cardData.auth" class="items-center">
            <i class="iconfont icon-gongsi"></i>
            <span class="fz-24">{{ cardMessage.company }}</span>
          </li>
          <li v-if="cardData.auth && cardData.auth.company && cardData.auth.company[0]" class="items-center">
            <i class="iconfont icon-gongsi"></i>
            <span class="fz-24">
              <em v-for="(company,cindex) in cardData.auth.company" :key="cindex">{{company.name}}<br></em>
            </span>
          </li>
          <li class="position items-center" v-if="area_name">
            <i class="iconfont icon-zx_map_locate1"></i>
            <span class="fz-24" style="-webkit-box-orient: vertical;">{{ area_name }}</span>
          </li>
        </ul>
      </div>
      <!-- 浏览人数 靠谱 -->
      <div class="user_box" v-if="cardMessage.card_statistics">
        <div class="user_photo">
          <div class="pho1" v-for="(item,index) in cardData.member_avatar" :key="index">
            <img :src="item.avatar_image" alt="">
          </div>
          <span>{{cardMessage.card_statistics.visit}}人浏览</span>
        </div>
        <div class="user_txt">
          <p>靠谱{{cardMessage.card_statistics.reliable}}</p>
          <i class="iconfont icon-card_laud_acitve"></i>
        </div>
      </div>
      <div class="card_button">
        <div style="display: flex; justify-content: space-around;">
        <button type="button"   @click.stop="gotoBusiness" style="background: #f5f5f5; border: 1px solid #66a4f1; color: #66a4f1; width: 10rem;">预览名片</button>
        <button type="button" @click="toPage('CardVisit')" style="width: 10rem; background: #50a6f9;">
          <!-- <i class="iconfont icon-bc_share_card sharecard"></i> -->
          分享名片
        </button>
        </div>
        <button type="button" class="other" @click="show1 = true" style="font-size: 0.6875rem;">
          其他方式发名片<i class="fa fa-angle-down"></i>
        </button>
      </div>
      <van-popup v-model="show1" position="bottom">
        <div class="list_btn">
          <button type="button" @click="toPage('CardVisit')">名片图片</button>
          <button type="button" @click="toPage('CardCode')">名片码</button>
          <button type="button" class="last" @click="show1 = false">
            取消
          </button>
        </div>
      </van-popup>
    </div>
    <div class="card_b">
      <div class="title">
        <!-- <div class="block"></div> -->
      <img style="width: 0.8438rem; height: 1rem;" src='https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/my.png'></img>
        <span>我的</span>
      </div>
      <ul class="item_box">
        <li @click="toPage('Card_Action')">
          <!-- <i class="iconfont icon-card_statis" style="color:#2ac0de"></i> -->
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/total.png" alt="">
          <span>数据统计</span>
        </li>
        <li @click="toPage('CardCollect')">
          <!-- <i class="iconfont icon-collect-active" style="color:#2ac0de"></i> -->
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/collect.png" alt="">
          <span>我的收藏</span>
        </li>
        <li @click="toPage('EditCard')">
          <!-- <i class="iconfont icon-balance_m" style="color:#2ac0de"></i> -->
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/card_edit.png" alt="">
          <span>名片编辑</span>
        </li>
      </ul>
    </div>
    <div class="card_c">
      <div class="title">
        <!-- <div class="block"></div> -->
        <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/find.png" style="width: 1.1875rem; height: 1rem;">
        <span>发现</span>
      </div>
      <ul class="item_box">
        <li @click="toPage('CardRanking')">
          <!-- <i class="iconfont icon-card_ranking" style="color:#ffbd38"></i> -->
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/ranking.png" alt="">
          <span>名片排名</span>
        </li>
        <li @click="toPage('CardFootprint')">
          <!-- <i class="iconfont icon-card_visitor" style="color:#ffbd38"></i> -->
          <img src="https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/caller.png" alt="">
          <span>访客足迹</span>
        </li>
      </ul>
    </div>
    <personBank v-model="showPersonBank" :hasCompany="false" :real_name_auth_set="{auth_type: cardData.auth_type}"><!-- 个人认证 --></personBank>
  </div>
</template>

<script>
import card_center_controller from "./card_center_controller";

export default card_center_controller;
</script>

<style lang="scss" rel="stylesheet/scss" scoped>
#card_conter {
  padding-top: 40px;
  padding-bottom: 60px;
  height: 110vh;
  position: relative;

  .mint-header {
    background: none;
    color: #666;
  }

  .is-fixed .mint-header-title {
    font-weight: bold;
  }

  .mint-header.is-fixed {
    border-bottom: 0.0625rem solid #e8e8e8;
    background: #fff;
    z-index: 99;
  }

  .is-right a {
    font-size: 10px;
  }

  .code-left {
    width: 3.063rem;
    height: 3rem;
    background-color: #fff;
    box-shadow: 0 0 1rem 0 rgba(0, 0, 0, 0.05);
    border-radius: 0 1.5rem 1.5rem 0;
    position: fixed;
    margin: -27.706rem 0 0 0;
    // top: 12.706rem;
    // left: 0;
    z-index: 10;
    display: flex;
    justify-content: space-around;
    align-items: center;

    .codeName {
      font-size: 0.75rem;
      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-line-clamp: 3;
      -webkit-box-orient: vertical;
      line-height: 100%;
    }

    i {
      margin-right: 8px;
      font-size: 24px;
    }
  }

  .card_a {
    // background: #fff;
    padding: 0.781rem;

    .header_box {
      display: flex;
      flex-direction: row-reverse;
      justify-content: space-between;
      background-image: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/business_card_bg.png");
      background-repeat: no-repeat;
      background-size: cover;
      background-position: 0;
      padding: 1.25rem 1rem 1.8438rem 0.9375rem;
      border-radius: 0.625rem;
      overflow: hidden;

      .header {
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        align-items: center;
        flex-shrink: 0;

        .iconfont {
          font-size: 1.5rem
        }

        .img {
          width: 3.75rem;
          height: 3.75rem;
          border-radius: 1.875rem;
          overflow: hidden;
          background: #f2f2f2;
          margin-bottom: 0.75rem;
          align-self: end;
          border: 2px solid #fff;

          img {
            width: 100%;
            height: 100%;
          }
        }

      }

      .per_info {
        text-align: left;
        .certification-box {
          margin: 0.5rem 0.625rem 0 0;
          height: 1rem;
          background: linear-gradient(318deg, rgba(255,211,154,0.85) 0%, rgba(255,229,97,0.13) 100%);
          border-radius: 6px;
          opacity: 1;
          .text{
            font-size: 0.5625rem;
            margin-right: 6px;
            color: #fff;
          }
        }
        .certification-box-bg-fff{
          background: linear-gradient(318deg, rgba(216,216,216,0.48) 0%, rgba(255,255,255,0.13) 100%);
        }

        .card-name {
          font-weight: bold;
          color: #FAFAFA;
          font-size: 1.3125rem;
        }

        .role-name {
          margin-right: 0.4375rem;
        }

        .role-name,
        .level-name {
          font-size: 0.75rem;
          color: #fff;
          font-weight: 500;
        }

        .items-center {
          align-items: center;
        }

        .fz-24 {
          font-size: 0.75rem !important;
        }

        li {
          // line-height: 1.5rem;
          margin-bottom: 0.5rem;
          display: flex;

          .icon-card_weixin {
            font-size: .6rem;
          }

          .icon-gongsi,
          .icon-zx_map_locate1 {
            font-size: .5rem;
            flex-shrink: 0;
          }

          .icon-zx_map_tel {
            font-size: .4rem;
            flex-shrink: 0;
          }


          i {
            position: relative;
            width: 1rem;
            height: 1rem;
            line-height: 1rem;
            background: url("https://mini-app-img-1251768088.cos.ap-guangzhou.myqcloud.com/plugin/business_card/business_card_icon_bg.png");
            background-repeat: no-repeat;
            background-position: center;
            background-size: cover;
            text-align: center;
            color: #fff;
            margin-right: 0.3125rem;
            font-size: 0.5625rem;
            opacity: .8;
          }

          span {
            font-size: 14px;
            color: #fff;
          }

          a {
            font-size: 14px;
            color: #fff;
          }
        }

        .position {
          align-items: flex-start;
          span {
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-line-clamp: 2;
            -webkit-box-orient: vertical;
          }
        }
      }
    }

    .collect {
      position: relative;
      border-radius: 0.9375rem;
      min-width: 3.375rem;
      height: 3.375rem;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      color: #fff;
    }

    .people {
      font-size: 0.625rem;
      font-weight: 400;
    }

    .collect::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      background: #FFFFFF;
      border-radius: 0.9375rem;
      bottom: 0;
      opacity: 0.2;
    }

    .user_box {
      background: #fff;
      border-radius: 0.3125rem;
      padding: 0.4688rem 0.625rem;
      display: flex;
      justify-content: space-between;
      margin-bottom: 1.281rem;
      margin-top: 1.5rem;

      .user_photo {
        height: 1.75rem;
        line-height: 1.75rem;

        span {
          font-size: 0.75rem;
          color: #666;
          margin-left: 0.5rem;
        }

        .pho1:first-child {
          margin: 0;
        }

        .pho1 {
          width: 1.75rem;
          height: 1.75rem;
          display: inline-block;
          margin-left: -0.5rem;
          float: left;
          background: #666;
          border-radius: 50%;

          img {
            width: 100%;
            height: 100%;
            border-radius: 50%;
          }
        }
      }

      .user_txt {
        display: flex;
        align-items: center;

        i {
          color: #1b8dfc;
          font-size: 1.3rem;
        }

        p {
          font-size: 0.75rem;
          color: #000;
        }
      }
    }

    .sum_box {
      margin: 0.625rem 0;
      display: flex;
      justify-content: space-between;

      .sum_left {
        .img {
          width: 1.75rem;
          height: 1.75rem;
        }
      }

      .sum_right {
        display: flex;
        justify-content: space-between;
        align-items: center;

        i {
          font-size: 1.2rem;
          color: #50a6f9;
        }
      }

      li {
        line-height: 2.5rem;
        display: flex;

        i {
          color: #50a6f9;
          font-size: 1.5rem;
          margin-right: 0.25rem;
        }

        span {
          font-size: 14px;
          color: #666;
        }
      }
    }

    .card_button {
      button {
        width: 100%;
        border-radius: 0.313rem;
        height: 2.5rem;
        line-height: 2.5rem;
        // background: #50a6f9;
        color: #fff;
        font-size: 16px;
        border: none;

        .sharecard {
          margin-right: 0.969rem;
        }
      }

      .other {
        // background: #fff;
        color: #999;
        margin-top: 0.625rem;

        i {
          margin-left: 0.375rem;
          font-size: 1.125rem;
        }
      }
    }

    .list_btn {
      background: #f5f5f5;

      button {
        background: #fff;
        border: none;
        border-radius: 0;
        width: 100%;
        height: 3.125rem;
        line-height: 3.125rem;
        font-size: 16px;
      }

      button:first-child {
        border-bottom: solid 0.0625rem #ebebeb;
      }

      .last {
        margin-top: 0.625rem;
      }
    }
  }

  .card_b,
  .card_c {
    padding: 0 0.9375rem;
    margin-top: 0.625rem;
    // background: #fff;

    .title {
      height: 2.5rem;
      line-height: 2.5rem;
      display: flex;
      align-items: center;

      img {
        margin: 0 0.1875rem 0 0;
      }

      .block {
        width: 0.25rem;
        height: 1rem;
        background: #50a6f9;
        border-radius: 0.0625rem;
        margin-right: 0.375rem;
      }

      span {
        font-weight: bold;
        font-size: 16px;
      }
    }

    .item_box {
      background: #fff;
      display: flex;
      border-radius: 0.3125rem;
      padding: 1rem 0;

      li {
        width: 33.33%;
        text-align: center;
        // i {
        //   font-size: 2rem;
        //   color: #f15353;
        // }
        img {
          width: 2rem;
          height: 2rem;
        }

        span {
          display: block;
          font-size: 14px;
          color: #666;
        }
      }
    }
  }

  .van-nav-bar,
  ::v-deep .van-nav-bar__content {
    height: 40px;
  }

  ::v-deep .van-nav-bar__title {
    font-weight: 700;
    font-size: 14px;
    color: #666;
  }

  ::v-deep .van-nav-bar .van-icon {
    color: #666;
  }

  ::v-deep .van-nav-bar__left {
    padding: 0 0 0 10px;
  }

  .pcStyle {
    width: 375px;
    margin: 0 auto;
    left: 50%;
    margin-left: -187.5px;
  }
}
</style>
